import React,{ useEffect, useState } from 'react'
import Taro, { useReachBottom } from '@tarojs/taro'
import { View, Image, Button } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import './index.less'

const tabs = ['全部','收入','支出']
export default function MineIntegral(props) {
  const [info,setInfo] = useState([])
  const [list,setList] = useState([])
  const [moreStatus,setmoreStatus] = useState('')
  const [filters,setFilters] = useState({
    page:1,
    pageSize:10,
  })
  const [curTabs,setCurTabs] = useState(0)
  useEffect(()=>{
    _getList({page:1})
  },[curTabs])
  useReachBottom(()=>{
    if(filters.total > list.length){
      _getList({page:filters.page+1},e=>{
        setList([...list,...e.records])
      })
    }else{
      setmoreStatus("no-more")
    }
  })

  const _getList = (e,func)=>{
    const data = {
      page:filters.page,
      pageSize:filters.pageSize,
      type:curTabs,
      ...e
    }
    Taro.showLoading({title:"加载中..."})
    Taro.$post('/wallet/userPoint/myPoint',data,'1').then(res=>{
      if(res.code == '1'){
        setFilters({...data,total:res.content?.pointRecordListResponses?.total})
        setmoreStatus('no-more')
        setInfo(res.content)
        if(func){
          func(res.content?.pointRecordListResponses)
          return;
        }
        setList(res.content?.pointRecordListResponses?.records)
      }
    })
  }
  return (
    <View className="mine-integral">
      <View className="integral-header">
        <View className='h1'>{info.usAblePoint}</View>
        <View className="box-flex">
          <View className='p theme-color'>{info.protectionPoint} 积分待领取 <View className="at-icon at-icon-chevron-right" style={{fontSize:12}}></View> </View>
          <View className='p' style={{marginLeft:'auto'}}>积分规则 <View className="at-icon at-icon-chevron-right" style={{fontSize:12}}></View></View>
        </View>
      </View>
      <View className="integral-list">
        <View className="list-title">积分变动明细</View>
        <View className="list-tabs">
          {tabs.map((res,index)=>{
            return <View key={index} onClick={()=>{setCurTabs(index)}} className={`p ${curTabs==index?'active ':''}`}>{res}</View>
          })}
        </View>
        {list?.length?
        list.map(item=>{
          return <View className="list-item" key={item.id}>
            <View className="item-title">
              <View className="dot h3">{item.title}</View>
              <View className='p'>{item.dateStr}</View>
            </View>
            <View className="item-info">
              <View className='h3'>{item.type == '1'?'+':'-'}{item.point}</View>
              {/* <View className='p'>余额 16600.00</View> */}
            </View>
          </View>
        }):
        <View className="var-empty" v-else>
          <Image src={require('@/images/empty.png')} style={{width: 200,height: 200}} mode="widthFix"></Image>
          <View className='p'>暂无明细</View>
        </View>}
      </View>
    </View>
  )
}